<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'查看兑换商品信息'">
    <Row class="p10">
      <Col span="24">
        <Form ref="form" :model="form.data" :label-width="110">
          <FormItem prop="photoPath" label="兑换商品图片">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
          <Row>
            <Col span="12">
              <FormItem prop="srvProName" label="兑换商品名称">
                {{form.data.srvProName}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="needScore" label="兑换商品积分">
                {{form.data.needScore}}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem prop="totalCount" label="剩余数量">
                {{form.data.totalCount}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="isEnable" label="是否外网显示">
                {{form.data.isEnable === '0' ? '显示': '不显示'}}
              </FormItem>
            </Col>
          </Row>
          <FormItem prop="srvProMemo" label="兑换商品说明">
            {{form.data.srvProMemo}}
          </FormItem>
        </Form>
      </Col>

      <Col span="24" class="mt10">
        <h2 class="mt20 mb20">商品兑换情况</h2>
        <div class="score-used-list">
          <Table
            :columns="columns"
            :data="list"
            no-data-text="该查询条件没有任何数据"
            class="mt20">
          </Table>
        </div>

        <div class="m10 clearfix" v-if="page.total > 0">
          <div class="fr">
            <Page
              show-total
              :total="page.total"
              :current="query.currentPage"
              @on-change="onChangePage">
            </Page>
          </div>
        </div>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import moment from 'moment'
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import viewImg from '@/components/view-img'
  import vipApi from '@/api/vip'

  export default {
    name: 'detail-modal',
    props: [
      'form'
    ],
    components: {
      viewImg
    },
    data () {
      return {
        loading: true,
        query: {
          pkRcId: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return params.row._index + 1
            }
          },
          {
            title: '兑换物品',
            key: 'pkSrvProName'
          },
          {
            title: '姓名',
            key: 'realName'
          },
          {
            title: '兑换时间',
            key: 'recCreDt',
            width: 150,
            render: (h, params) => {
              let { row } = params
              if (row.recCreDt) {
                return moment(row.recCreDt).format('YYYY-MM-DD HH:mm')
              } else {
                return '-'
              }
            }
          },
          {
            title: '使用积分',
            width: 100,
            key: 'saleScore'
          },
          {
            title: '确认时间',
            key: 'confirmDt',
            width: 150,
            render: (h, params) => {
              let { row } = params
              if (row.confirmDt) {
                return moment(row.confirmDt).format('YYYY-MM-DD HH:mm')
              } else {
                return '-'
              }
            }
          },
          {
            title: '状态',
            key: 'isConfirm',
            width: 80,
            render: (h, params) => {
              let { row } = params
              return row.isConfirm === 0 ? '已确认' : '未确认'
            }
          }
        ],
        list: []
      }
    },
    watch: {
      'form.visible': 'onClose',
      'query.currentPage': 'getList'
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      onClose (isVisible) {
        if (isVisible) {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.photoPath || '')
          this.getList()
        }
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        this.query.pkSrvProId = this.form.data.pkSrvPro
        const { body } = await vipApi.scoreUsedList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
      }
    }
  }
</script>
